<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const thresholdColumns = [
    { title: '指标名称', dataIndex: 'name', key: 'name', width: 150, align: 'center' },
    { title: '当前阀值', dataIndex: 'threshold', key: 'threshold', align: 'center' },
    { title: '设置新阀值', dataIndex: 'new', key: 'new', align: 'center' },
    { title: '', dataIndex: 'operation', key: 'operation', align: 'center' },
  ];

  const thresholdTableData = ref([
    {
      name: '电压偏差',
      threshold: '±5%',
      new: '',
    },
    {
      name: '频率偏差',
      threshold: '±0.1%',
      new: '',
    },
    {
      name: '谐波含量',
      threshold: '<5%',
      new: '',
    },
    {
      name: '闪变',
      threshold: '<1%',
      new: '',
    },
    {
      name: '功率因数',
      threshold: '0.95-1.00',
      new: '',
    },
    {
      name: '三相电压不平衡度',
      threshold: '<2%',
      new: '',
    },
    {
      name: '三相电流不平衡度',
      threshold: '<2%',
      new: '',
    },
    {
      name: '电压暂降次数',
      threshold: '<10次/年',
      new: '',
    },
    {
      name: '电压中断次数',
      threshold: '<1次/年',
      new: '',
    },
    {
      name: '设备温度',
      threshold: '<80°C',
      new: '',
    },
  ]);

  const indexColumns = [
    { title: '指标名称', dataIndex: 'name', key: 'name', width: 150, align: 'center' },
    { title: '当前权重', dataIndex: 'weight', key: 'weight', align: 'center' },
    { title: '设置新权重', dataIndex: 'new', key: 'new', align: 'center' },
    { title: '', dataIndex: 'operation', key: 'operation', align: 'center' },
  ];

  const indexTableData = ref([
    {
      name: '电压偏差',
      weight: '10%',
      new: '',
    },
    {
      name: '频率偏差',
      weight: '10%',
      new: '',
    },
    {
      name: '谐波含量',
      weight: '10%',
      new: '',
    },
    {
      name: '闪变',
      weight: '5%',
      new: '',
    },
    {
      name: '功率因数',
      weight: '15%',
      new: '',
    },
    {
      name: '三相电压不平衡度',
      weight: '15%',
      new: '',
    },
    {
      name: '三相电流不平衡度',
      weight: '15%',
      new: '',
    },
    {
      name: '电压暂降次数',
      weight: '10%',
      new: '',
    },
    {
      name: '电压中断次数',
      weight: '10%',
      new: '',
    },
  ]);
</script>

<template>
  <div class="container">
    <a-row :gutter="[10, 10]">
      <a-col :span="12">
        <a-card title="指标阀值设置">
          <a-table :columns="thresholdColumns" :data-source="thresholdTableData" rowKey="id">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex == 'new'">
                <div>
                  <a-input v-model:value="record.value" style="margin: -5px 0" />
                </div>
              </template>
              <template v-if="column.dataIndex == 'operation'">
                <div>
                  <a-button type="primary">保存</a-button>
                </div>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="权重值设置">
          <a-table :columns="indexColumns" :data-source="indexTableData" rowKey="id">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex == 'new'">
                <div>
                  <a-input v-model:value="record.value" style="margin: -5px 0" />
                </div>
              </template>
              <template v-if="column.dataIndex == 'operation'">
                <div>
                  <a-button type="primary">保存</a-button>
                </div>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="save">
          <a-button type="primary">保存所有设置</a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
  .ant-card {
    min-height: 1100px;
  }

  .save {
    display: flex;
    justify-content: center;
  }
</style>
